
/*
if (!isset($_SESSION['tiempo'])) {
  $_SESSION['tiempo']=time();
}
else if (time() - $_SESSION['tiempo'] > 10) {
  session_destroy();
  
  echo "<script> 
        document.location.href='/mi_cabanita_sis/mi_cabanita_sis/';
    </script>";
  die();  
}
$_SESSION['tiempo']=time(); */
//echo $nta[0]["ID"];
?>
<style>
.sizet{
  width: 530px;
}
</style>


<div class="row">
  <div class="col-lg-12">
    <div class="row">
      <div class="col-md-12 mb-lg-0">
        <div class="card-header pb-0 p-2">
          <div class="row">
            <div class="col-2">
              <a href="../functions/cerrar_nota.php"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar"><img style="padding: 20%;" width="50" src="../assets/img/icons/cerrar.png"></i></a>
            </div>
            <div class="col-2">
              <i class="material-icons ms-auto text-dark cursor-pointer redondo-b" data-bs-toggle="tooltip" data-bs-placement="top" title="Refrescar"><img style="padding: 20%;" width="50" src="../assets/img/icons/refresh.png"></i>
            </div>
            <div class="col-2">
              <i class="material-icons ms-auto text-dark cursor-pointer redondo-b" type="button" data-bs-toggle="modal" data-bs-placement="top" title="Ver usuarios ON" data-bs-target="#modalUser"><img style="padding: 20%;" width="50" src="../assets/img/icons/user.png"></i>
            </div>
            <div class="col-2">
            <a href="/mi_cabanita_sis/functions/salir.php"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar Sesion"><img style="padding: 20%;" width="50" src="../assets/img/icons/sesion.png"></i></a>
            </div>
            <div class="col-4 d-flex mb-4 justify-content-center">
              <img width="130" src="../assets/img/logos/logo.png">
            </div>
          </div>
        </div>
        <div class="card mt-1">
          <div class="card-body p-1">
            <div class="row">
              <div class="col-md-4 mb-md-0 mb-4">
                <div class="card card-body card-plain border-radius-lg d-flex align-items-center flex-row">
                 
                  <i class="material-icons text-dark cursor-pointer redondo-g" data-bs-toggle="modal" data-bs-placement="top" title="Imprimir Nota de Venta" data-bs-target="#modalImprimir"><img style="padding: 20%;" width="50" src="../assets/img/icons/impresion.png"></i>
                  
                  <i class="material-icons ms-auto text-dark cursor-pointer redondo-g" type="button" data-bs-toggle="modal" data-bs-placement="top" title="Ver menu" data-bs-target="#Modal-2"><img style="padding: 20%;" width="50" src="../assets/img/icons/menu.png"></i>
                </div>
              </div>
              <div class="col-md-8 pt-1">
                <div class="card card-body card-plain d-flex justify-content-center flex-row text-center banner-titulo" style="  background: #052659; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);">
                  <h6 class="font-weight-bold mb-0 text-white" style="font-size: 25px; line-height: 1;">Nota de Venta</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
        <div class="row pt-3">
          <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
            <div class="card">
              <hr class="dark horizontal my-0">
              <div class="card-footer p-2">
                <button class="btn bg-gradient-info w-100 mb-0 toast-btn" type="button" data-target="successToast">Captura</button>
              </div>
              <div class="card-footer p-2">
                <button class="btn bg-gradient-warning w-100 mb-0 toast-btn" type="button" data-target="successToast">Tiempo</button>
              </div>
              <div class="card-footer p-2">
                <button class="btn bg-gradient-success w-100 mb-0 toast-btn" type="button" data-target="successToast">Comensal</button>
              </div>
            </div>
          </div>
        
          <div class="col-lg-6 col-sm-6 mb-lg-0 mb-4">
            <div class="card">
              <div class="card-header p-1">
                <div class="text-start">
                  <h5 class="mb-0">
                    <!--Nombre del mesero:--> <?php echo $nombreUsuario;?>
                  </h5>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <hr class="dark horizontal my-0">
                    <div class="card-footer p-2">
                      <select class="form-select" aria-label="Default select example" id="zona_atencion">
                        <option selected> Venta en piso</option>
                        <option value="3001">3001</option>
                        <option value="3002">3002</option>
                        <option value="3003">3003</option>
                      </select>
                    </div>
                    <div class="card-footer p-2">
                      <select class="form-select" aria-label="Default select example" id="no_mesa">
                        <option selected> Mesa</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                      </select>
                    </div>
                    <div class="card-footer p-2">
                      <div class="input-group input-group-outline">
                        <label class="form-label"><!--Número de personas--></label>
                        <input type="text" class="form-control" id="no_personas" value="<?php echo $nota[11]["PERSONAS"]?>" >
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 text-center">
                  <i>Temp:</i>
                  <h1 style="font-size: 70px;" id="temporizador">8</h1>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-sm-6">
            <div class="card">
              <div class="card-header p-1">
                <div class="text-start">
                  <h5 class="mb-0">
                    No. Nota: <?php echo $nota[1]["CLAVE"]?>
                  </h5>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6 text-center">
                    <div class="card-footer p-2">
                      <div class="input-group input-group-outline">
                        <label class="form-label"></label>
                        <input type="text" class="form-control" id="hora_ini" value="<?php echo $nota[2]["HORA_INI"]?>" disabled>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 text-center">
                  <div class="card-footer p-2">
                      <div class="input-group input-group-outline">
                        <label class="form-label"><!--Hora Up--></label>
                        <input type="text" class="form-control" id="hora_edt" value="<?php echo $nota[4]["EDICION"]?>" disabled>
                      </div>
                    </div>
                </div>

                <div class="col-sm-6 text-center">
                    <div class="d-flex flex-column pt-1">
                      <h6 class="mb-1 text-dark font-weight-bold text-sm">Subtotal:</h6>
                    </div>
                    <div class="d-flex flex-column pt-1">
                      <h6 class="mb-1 text-dark font-weight-bold text-sm">Descuento:</h6>
                    </div>
                    <div class="d-flex flex-column pt-1">
                      <h4 class="mb-1 text-dark font-weight-bold text-sm">Total:</h4>
                    </div>
                </div>
                <div class="col-sm-6 text-center">   
                    <div id="sub_des_total"></div>    
                    
                </div>
              </div>
            </div>
        </div>
        <form action="" method="post" id="form"> 
        <div class="col-12">
          <div class="card my-1">
            <div class="card-body px-0">
              <div class="table-responsive">
                <table class="table">
                  <thead style="background: #052659; color:#D5D8DC;">
                    <tr>
                      <th class="align-middle text-center" scope="col">Com</th>
                      <th class="align-middle text-center" scope="col">Cant</th>
                      <th class="align-middle text-center" scope="col">Producto</th>
                      <th class="align-middle text-center" scope="col">Descuento</th>
                      <th class="align-middle text-center" scope="col">Precio</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>
                        <div class="input-group input-group-outline">
                          <label class="form-label">Comensal</label>
                          <input type="text" class="form-control" id="comensal" >
                        </div>
                      </th>
                      <th>
                        <div class="input-group input-group-outline">
                          <label class="form-label">Cantidad</label>
                          <input type="text" class="form-control" id="cantidad">
                        </div>
                      </th>
                      <th>
                        <div class="sizet input-group input-group-outline">
                          <label class="form-label"><!--Producto--></label>
                          <input type="text" class="form-control" id="producto" disabled>
                        </div>
                      </th>
                      <th>
                        <div class="input-group input-group-outline">
                          <label class="form-label">Descuento</label>
                          <input type="text" class="form-control" id="descuento" value="0">
                        </div>
                      </th>
                      <th>
                        <div class="input-group input-group-outline">
                          <label class="form-label"><!--Precio--></label>
                          <input type="text" class="form-control" id="precio" disabled>
                        </div>
                      </th>
                    </tr>
                  </tbody>
                </table>
                <table class="table">
                  <thead></thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="input-group input-group-outline">
                            <select class="form-select" aria-label="Default select example" id="tiempo">
                              <option selected> Tiempo</option>
                              <option value="T1">T1</option>
                              <option value="T2">T2</option>
                              <option value="T3">T3</option>
                            </select>
                          </div>
                        </td>
                        <td>
                          <div class="sizet input-group input-group-outline">
                            <label class="form-label">Comentarios</label>
                            <input type="text" class="form-control" id="comentario">
                          </div>
                        </td>
                      </tr>
                    </tbody>
                </table>
                <table class="table p-1">
                  <thead>
                      <tr>
                        <th class="align-middle text-center" scope="col">
                            <span class="badge badge-sm btn bg-gradient-warning" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px;" id="btn_agregar">Agregar producto</span>
                        </th>
                        <th class="align-middle text-center" scope="col">
                            <span class="badge badge-sm btn bg-gradient-danger" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px;">Eliminar renglon</span>
                        </th>
                        <td class="align-middle text-center ">
                          <span class="badge badge-sm btn bg-gradient-info" type="button" data-bs-toggle="modal" data-bs-target="#modalBuscador" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px;">Buscar producto</span>
                        </td>
                      </tr>
                    </thead>
                </table>
              </div>
            </div>

          </div>
        </div>
        </form>

        <div class="col-12">
          <div class="card my-1">
            <div class="card-body px-0">
              <div class="table-responsive">
                <div id="tabla_productos_x_nota"></div>
              </div>
            </div>

          </div>
        </div>
    </div>
  </div>


</div>

<!-- Modal Usuarios -->
<div class="modal fade" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalUserLabel">Usuarios Activos</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="card h-100">
            <div class="card-header pb-0 p-3">
              <div class="row">
                <div class="col-6 d-flex align-items-center">
                  <h6 class="mb-0">Usuario:</h6>
                </div>
              </div>
            </div>
            <div class="card-body p-3 pb-0">
              <ul class="list-group">
              <?php
                for($rr=0;$rr<count($dato_usuarios);$rr++){
              ?>
              <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                <div class="d-flex flex-column">
                  <h6 class="mb-1 text-dark font-weight-bold text-sm"><?php echo $dato_usuarios[$rr]['NOMBRE']?></h6>
                </div>
              </li>
              <?php
                }
              ?>
              </ul>
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Impresion-->
<div class="modal fade" id="modalImprimir" tabindex="-1" aria-labelledby="modalImprimirLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalImprimirLabel">Impresión</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="card h-100">
            <div class="card-header pb-0 p-3">
              <div class="row">
                <div class="col-12 d-flex align-items-center">
                  <h6 class="mb-0">Selecciona el tipo de impresión:</h6>
                </div>
              </div>
            </div>
            <div class="card-body p-3 pb-0">
              <div class="form-check pt-1">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
                <label class="form-check-label" for="flexRadioDefault3">
                  Imprimir TODOS los productos.
                </label>
              </div>
              <div class="form-check pt-1">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                <label class="form-check-label" for="flexRadioDefault2">
                  Imprimir ULTIMOS productos agregados.
                </label>
              </div>
              <div class="form-check pt-1">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                <label class="form-check-label" for="flexRadioDefault1">
                  Imprimir cuenta.
                </label>
              </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" id="btn_imprimir">Imprimir</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Menu Carta-->
<div class="modal fade" id="Modal-2" tabindex="-1" aria-labelledby="Modal-2Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="Modal-2Label">Ver carta</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-10">
            <div class="ms-md-auto pe-md-3 d-flex align-items-center">
              <div class="input-group input-group-outline ">
                <label class="form-label">Buscador...</label>
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
          <div class="col-sm-2">
            <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
          </div>
        </div>
        <div class="table-responsive pt-2">
          <table class="table">
            <thead style="background: #D5D8DC;">
              <tr>
                <th class="align-middle text-center" scope="col">Nombre del Producto</th>
                <th class="align-middle text-center" scope="col">Costo</th>
              </tr>
            </thead>
            <tbody>
              <?php
                for($reg=0;$reg<count($datos);$reg++){
              ?>
              <tr>
                <td class="align-middle text-center"><?php echo $datos[$reg]["NOMBRE"]?></td>
                <td class="align-middle text-center"><?php echo $datos[$reg]["PRECIO"]?></td>
              </tr>
              <?php }?>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Buscador-->
<div class="modal fade" id="modalBuscador" tabindex="-1" aria-labelledby="modalBuscador" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBuscador">Buscador</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-10">
            <div class="ms-md-auto pe-md-3 d-flex align-items-center">
              <div class="input-group input-group-outline ">
                <label class="form-label">Buscador...</label>
                <input type="text" class="form-control" id="caja_buscar_producto">
              </div>
            </div>
          </div>
          <div class="col-sm-2">
            <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
          </div>
        </div>
        <div class="table-responsive pt-2">
          <div id="buscar_producto">

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" id="pro_agregar_nota">Agregar</button>
      </div>
    </div>
  </div>
</div>
<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/js/funciones.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#tabla_productos_x_nota').load('tabla_productos_nota.php');
    $datos = "<div class='d-flex align-items-center text-sm p-1' data-value='<?php echo $nota[7]["SUBTOTAL"]?>' ><?php echo $nota[7]["SUBTOTAL"]?></div><div class='d-flex align-items-center text-sm p-1'  data-value='<?php echo $nota[8]["DESCUENTO"]?>'><?php echo $nota[8]["DESCUENTO"]?></div><div class='d-flex align-items-center text-sm p-1'  data-value='<?php echo $nota[9]["TOTAL"]?>'><?php echo $nota[9]["TOTAL"]?></div>";
    $('#sub_des_total').html($datos);
  });
</script>
<script>
  var sec = 10;

  function segundos(){
    var minuto = Math.trunc(seconds/60);
  }
</script>
<script>
  $(document).ready(function(){
    //$('input[type="checkbox"]').click(function(){
      $('input[type="radio"]').click(function(){
      
      if($(this).is(':checked')){
            //$('input[type="checkbox"]').not(this).prop('checked', false);
            var tr = $(this).closest('tr');
            var nombre_prod = $(tr).find('td:nth-child(2)').text();
            var precio_prod = $(tr).find('td:nth-child(3)').text();
            nombre_product= nombre_prod;
            precio_product=precio_prod;
      };
    });
    $('#pro_agregar_nota').on('click', function() {
        cambiar_datos_productos_form_nota(nombre_product,precio_product);
        $('#modalBuscador').modal('toggle'); 
    });
  });
  
</script>
<script >
    $('#btn_agregar').on('click', function() {

        var comensal = document.getElementById('comensal').value;
        var cantidad = document.getElementById('cantidad').value;
        var producto = document.getElementById('producto').value;
        var descuento = document.getElementById('descuento').value;
        var precio = document.getElementById('precio').value;
        var tiempo = document.getElementById('tiempo').value;
        var comentario = document.getElementById('comentario').value;

        var datos = {
          
            "comensal":comensal,
            "cantidad":cantidad,
            "producto":producto,
            "descuento":descuento,
            "precio":precio,
            "tiempo":tiempo,
            "comentario":comentario,
        };

        if(producto=='undefined'){
          alert('Introduce el producto');
        }
        else{
          var url = "../functions/producto_nota.php"; 
          
          enviarDatos(datos, url); 
          vaciarDatos();
        }
        
        
    });
</script>
<script>
  $('#btn_imprimir').on('click', function(){
    var zona_atencion = document.getElementById('zona_atencion').value;
    var no_mesa = document.getElementById('no_mesa').value;
    var no_personas = document.getElementById('no_personas').value;
    var hora_edt = document.getElementById('hora_edt').value;
    var subtotal = $("#subtotal").text();
    var total_descuento = $("#total_descuento").text();
    var total_nota = $("#total_nota").text();
    
    var datos2 = {
          
      "zona_atencion": zona_atencion,
      "no_mesa": no_mesa, 
      "no_personas": no_personas,
      "hora_edt": hora_edt,
      "subtotal": subtotal,
      "total_descuento": total_descuento,
      "total_nota": total_nota,
      };
    
    var url2 = "../functions/terminar_nota.php"; 
    //console.log(datos2);
    terminar_nota(datos2,url2);

  
  });
</script>

<!--@Footer-->
<?php
include("path/footer.php");
?>